import React, {useEffect} from "react";

import "./index.scss";

import * as THREE from "three";

export default (): JSX.Element => {
  useEffect(() => {
    // ----------场景
    const scene = new THREE.Scene(); // 场景
    // const geometry = new THREE.SphereGeometry(60, 40, 40); // 创建几何球体
    const geometry = new THREE.BoxGeometry(100, 100, 100) // 创建几何立方体

    const material = new THREE.MeshLambertMaterial({ color: 0xff0000 }); // 材质对象
    const mesh = new THREE.Mesh(geometry, material); // 网格对象
    scene.add(mesh); // 将网格对象添加到场景中

    const point = new THREE.PointLight(0xffffff); // 点光源
    point.position.set(400, 200, 300); // 点光源位置
    scene.add(point); // 点光源添加到场景中

    const ambient = new THREE.AmbientLight(0x444444); // 环光源
    scene.add(ambient);

    // ----------相机
    const w = window.innerWidth;
    const h = window.innerHeight;
    const k = w / h;
    const s = 200; // 三维场景显示范围控制系数，越大显示范围越大
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); // 相机对象
    camera.position.set(200, 300, 200); // 相机位置
    camera.lookAt(scene.position); // 相机方向（横向场景对象）

    // ----------渲染器
    const renderer = new THREE.WebGL1Renderer();
    renderer.setSize(w, h); // 设置渲染区域尺寸
    // renderer.setClearColor(0xb9d3ff, 1); // 设置背景色默认黑色
    document.body.appendChild(renderer.domElement); // 添加canvas到html中
  
    function render() {
      renderer.render(scene, camera); // 通过场景和相机参数渲染
      mesh.rotateX(0.01)
      mesh.rotateY(0.01)
      mesh.rotateZ(0.01)
      requestAnimationFrame(render)
    }

    render()

    return () => {
      document.body.removeChild(renderer.domElement); // 添加canvas到html中
    };
  }, []);
  return <div>旋转动画</div>;
};
